<template>
	<view>
		<!-- 页首 -->
		<zw-header></zw-header>
		<menu-wrapper active-index="2-1" style="background-color: #fff;padding: 0;">
			<view style="display: flex;justify-content:space-between;align-items: center;margin-top: 25px;">
				<view class="lable">发布AI创作</view>
				<view class="publish" @click="clickOption(3)">
					<image src="/static/image/home/fb.png" style="width: 34rpx;height:30rpx;margin-right: 20rpx;">
					</image>
					我要发布
				</view>
			</view>
			<view class="card-body">
				<view class="container">
					<view>
						<fui-checkbox-group name="checkbox" v-model="vals" @change="change">
						
							<scroll-view scroll-y @scrolltolower="getList">
								<view style="display: flex;flex-wrap: wrap;margin-bottom: 100rpx;align-items: flex-start;">
									<view v-for="(item,index) in list" style="width: 16%;position: relative;margin-top: 34rpx;">
										<view style="position: absolute;right: 15%;top: 20rpx;z-index: 1;">
											<fui-checkbox :value="item.path"></fui-checkbox>
										</view>
										<image :src="item.path" style="width: 90%;border-radius: 28rpx;" mode="widthFix">
										</image>
									</view>
								</view>
							</scroll-view>
						</fui-checkbox-group>
					</view>
					<fui-empty isFixed width="200" v-if="list.length==0" height="200" marginTop="400"
						src="../../static/image/user/empty.png" title="暂无数据"></fui-empty>
				</view>
			</view>
		</menu-wrapper>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				...centerConfig,
				accountInfo: {},
				counts: [],
				tabIndex: 1,
				list: [],
				page: 0,
				nameKey: '',
				vals:[],
			}
		},
		computed: {
			...mapState(['loginUser']),
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad(op) {
			this.tabIndex = op.tabIndex;
			this.getList();
			this.$store.commit('tab', 0);
		},
		onReachBottom() {
			console.log('下拉加载')
			this.getList()
		},
		methods: {
			change(e){
				console.log(e)
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},
			clickOption(index) {
				if(this.vals.length<=0){
					uni.showToast({
						title:'请选择作品',
						icon:'none'
					})
					return false;
				}
				uni.setStorage({
					data:this.vals,
					key:'picture'
				})
				this.goUrl('/pages/publish/picture')
			},
			getList() {
				let that = this;
				var cmd = '';
				if (this.nameKey) {
					cmd = this.nameKey
				}
				this.$util.request('/api/v1/myphoto/mine', {
					page: that.page,
					cmd: cmd
				}, (res) => {
					console.log('myphoto', res)
					if(res.data.length>0){
						that.page = that.page + 1;
					}
					that.list=that.list.concat( res.data)
				}, true);
			},
		}
	}
</script>

<style lang="scss">
	.card-body {
		margin-top: 60rpx;
	}

	.lable {
		font-family: Source Han Sans;
		font-size: 80rpx;
		font-weight: bold;
		font-feature-settings: "kern" on;
		color: #3D3D3D;

	}

	.publish {
		background: #A5A5A5;
		border-radius: 50px;
		color: #FFFFFF;
		font-size: 14px;
		padding: 10rpx 20rpx 10rpx 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>